<!--
 * @LastEditTime: 2023-10-11 16:46:24
 * @FilePath: \bdcar-net\src\views\comlbs\alarmRule\fenceBind.vue
-->
<template>
  <div>
    <div class="unsetSearch">
      <span class="search-text" style="display:flex;width: 67px;margin-right: 0;">{{ fenceOrLineTable[0].label }}</span>
      <el-input class="search-input" v-model="query.name" placeholder="" :clearable="true"></el-input>
      <span class="search-text" style="margin-right:10px">所属公司</span>
      <el-tree-select v-model="query.companyId" clearable :data="prop.companyOptions" :expand-on-click-node="false"
        :render-after-expand="false" check-strictly :props="{ label: 'label' }" node-key="id" filterable placeholder="" />
      <el-button style="margin-left: 20px;" type="primary" icon="Search" @click="getTableData">搜索</el-button>
    </div>
    <div class="dialog-table">
      <el-table highlight-current-row ref="mytable" @select="handleSelectionChange" @select-all="handleSelectionAll"
        :data="tableData" height="100%">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column :prop="v.name" :label="v.label" :width="v.width" align="left" v-for="v in fenceOrLineTable"
          :key="v.name" show-overflow-tooltip> </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination v-show="pagination.total > 0" :total="pagination.total" v-model:page="pagination.pageNum"
        v-model:limit="pagination.pageSize" @pagination="getTableData" />
    </div>
  </div>
</template>

<script setup>
import { getfenceOrLinedata } from "@/api/comlbs/alarmRule";
const prop = defineProps({
  fenceOrLineTable: { type: Array },
  companyOptions: { type: Array },
  parentQuery: { type: Object },
});
//请求参数
const query = ref({
  companyId: null
})
const pagination = ref({
  total: 0,
  pageNum: 1,
  pageSize: 15,
})
const tableData = ref([])
const initialList = ref([])//最开始绑定的车列表
const oldSelList = ref([])
const newList = ref([])
const mytable = ref(null)

function getTableData() {
  let data = {
    ...prop.parentQuery, ...query.value,
    pageSize: pagination.value.pageSize,
    pageNum: pagination.value.pageNum,
  }
  getfenceOrLinedata(data).then(res => {
    if (res.code == 200) {
      tableData.value = res.rows;
      pagination.value.total = res.total;

      nextTick(() => {
        tableData.value.forEach(v => {
          if (v.bindStatus == 1) {
            mytable.value.toggleRowSelection(v); //存在绑定则table勾选
            initialList.value.push(v.id)
            oldSelList.value.push({
              name: v.name,
              id: v.id
            })
          }
        })
      })
    }
  })
}
// function paginationSizeChange(val) {
//   pagination.value.pageSize = val;
//   getTableData()
// }
// function paginationCurrentChange(val) {
//   pagination.value.pageNum = val;
//   getTableData()
// }
getTableData()


//设备选择 单选点击事件 (_list 勾选的list, obj 当前操作项)
function handleSelectionChange(_list, obj) {
  let exist = false;
  // 判断当前操作项是勾选上还是取消勾选
  for (let i = 0; i < _list.length; i++) {
    if (_list[i] === obj) {
      exist = true;
      break
    }
  }
  if (exist) { //勾选
    let flag = true;
    // 是否存在旧勾选设备 (比如在提交表单之前 取消勾选了旧数据，又勾上了)
    if (initialList.value.includes(obj.id)) {
      oldSelList.value.push(obj)
      flag = false;
    }
    if (flag) {
      newList.value.push(obj.id)
    }
  } else { //取消勾选
    let i = oldSelList.value.findIndex(el => el.id === obj.id)
    if (i != -1) {
      oldSelList.value.splice(i, 1)
      return
    }
    let _index = newList.value.findIndex(el => el.id === obj.id)
    if (_index != -1) {
      newList.value.splice(ii, 1)
    }
  }
}
//设备选择 全选点击事件
function handleSelectionAll(selectRows) {
  if (selectRows.length) {
    let chkCar = selectRows.filter(v => {
      let flag = true;
      // 旧勾选的设备
      for (let i = 0; i < oldSelList.value.length; i++) {
        if (oldSelList.value[i].id === v.id) {
          flag = false;
          break
        }
      }
      if (!flag) {
        return flag
      }
      // 新勾选的设备
      for (let i = 0; i < newList.value.length; i++) {
        if (newList.value[i].id === v.id) {
          flag = false;
          break
        }
      }
      if (!flag) {
        return flag
      }
      // 是否存在旧勾选设备
      if (initialList.value.includes(v.id)) {
        oldSelList.value.push(v)
        flag = false;
      }
      return flag;
    });
    newList.value = [...newList.value, ...chkCar];
  } else {
    // 旧勾选的设备
    oldSelList.value = oldSelList.value.filter(v => {
      let flag = true;
      for (let i = 0; i < tableData.value.length; i++) {
        if (tableData.value[i].id === v.id) {
          flag = false;
          break
        }
      }
      return flag
    })
    // 新勾选的设备
    newList.value = newList.value.filter(v => {
      let flag = true;
      for (let i = 0; i < tableData.value.length; i++) {
        if (tableData.value[i].id === v.id) {
          flag = false;
          break
        }
      }
      return flag
    })
  }
}
//将需要暴露出去的数据与方法暴露出去
defineExpose({
  newList,
  oldSelList,
  initialList
})
</script>
<style lang='scss' scoped>
.dialog-table {
  height: calc(100% - 70px);
}

.unsetSearch {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 20px;

  .search-input {
    width: 138px;
  }
}

.pagination {
  display: flex;
  justify-content: end;
  padding: 0 20px
}
</style>